<template>
<h3>Class样式绑定</h3>
<p :class="{active:isActive}">绑定的样式</p>
<!-- <p class="active">绑定的样式</p> -->
<p :class="{'active': isActive, 'text-danger': hasError}">新的对象内容</p>

<button @click="changeRed">字体变红色</button>
<h4>多个对象的绑定</h4>
<p :class="classMany"> 多个对象的绑定结果</p>
<!-- <p class="active text-danger"> 多个对象的绑定结果</p> -->
</template>
<script>
export default {
  data() {
    return {
      isActive: false,
      // 这里通过样式加style样式,如果是true则字体变成红色,否则不会应用css颜色修改
      hasError: false,
      classMany: {
        'active': true,
        'text-danger': true
      }
    };
  },
  // 计算属性
  computed: {},
  methods: {
    changeRed(){
      this.isActive = true
    }
  },
};
</script>
<style>
.active{
  color:red;
}
</style>